<template>
  <div>
    <div class="c-flex-row c-aligni-center c-pv10 c-pl20 c-pr10 c-ww430 c-hh52 c-br28 c-p c-bg-white">
      <div class="c-flex-row c-aligni-center c-fs22" v-show="selectList.length > 0">
        <popup-picker :themeColor="$getThemeColor()" class="selectPicker c-mr10" title="" style="c-w100" v-model="selectItem" :data="selectList" @on-change="changeSelect"></popup-picker>
        <span class="iconfont c-fs18 c-fc-sgray">&#xe601;</span>
      </div>
      <input :class="selectList.length > 0?'c-ph16':''" ref="input" type="text" :placeholder="placeholder" class="c-fs22 c-flex-grow1 needsClick c-w0" v-model="searchVal" @keyup.enter="search">
      <span @click.stop="search" class="iconfont c-fs28 c-fc-sgray">&#xe6d6;</span>
    </div>
  </div>
</template>

<script>
import { PopupPicker } from 'ckjrweb-mp-ui/src/components/index'
export default {
  name: "NewSearchBar",
  components: {
    PopupPicker
  },
  props: {
    //placeholder 搜索栏Placeholder
    placeholder: {
      type: String,
      default: "请输入搜索内容"
    },
    // searchButton = [always|auto|none] 是否显示搜索按钮 always 一直显示 auto 输入框不为空时显示 none 一直不显示
    searchButton: {
      type: String,
      default: "auto"
    },
    isShowbutton:{
      type: Boolean,
      default: false
    },
    // searchText 返回的搜索值
    searchText: {
      type: String,
      default: ''
    },
    // selectList下拉框数据
    selectList: {
      type: Array,
      default: () => []
    },
    bgSearch: {
      type: String,
      default: 'c-bg-white'
    },
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") || "mb5_default",
      show: false,
      searchVal: "",
      selectItem: (this.selectList.length > 0 && [this.selectList[0][0]]) || [],
      isShowIcon: false
    }
  },
  watch: {
    searchText: function (val) {
      console.log(val)
      this.searchVal = val;
    },
    selectList: function (val) {
      this.selectItem = val.length > 0 && [val[0][0]];
    },
  },
  activated() {
    if (this.searchText == '') {
      this.show = false;
      this.searchVal = "";
    }
    this.selectItem = (this.selectList.length > 0 && [this.selectList[0][0]]) || [];
  },
  methods: {
    clockSearchShow() {
      this.$emit('clockSearchShow')
    },
    searchAll() {
      this.searchVal = ''
      this.$emit('searchAll')
    },
    // 获取焦点事件
    clickFocus() {
      this.$nextTick(() => {
        this.$refs.input.focus();
      })
    },
    // search 事件，返回参数为input的value，e={value:Number}
    search() {
      if (this.selectItem.length > 0) {
        this.$emit("search", {
          searchValue: this.searchVal,
          selectItem: this.selectItem[0]
        })
      } else {
        this.$emit("search", {
          searchValue: this.searchVal
        })
      }
    },
    changeSelect(value) {
      this.selectItem = value;
      this.$emit('changeSelect', value)
    }
  }
}
</script>

<style scoped>
input {
  font-size: 0.6rem;
  border: 0;
  background: none;
  outline: none;
}
input::-webkit-input-placeholder {
  font-size: 0.55rem;
  /* WebKit browsers 适配谷歌 */
  color: #cccccc;
}
input:-moz-placeholder {
  font-size: 0.55rem;
  /* Mozilla Firefox 4 to 18 适配火狐 */
  color: #cccccc;
}
input::-moz-placeholder {
  font-size: 0.55rem;
  /* Mozilla Firefox 19+ 适配火狐 */
  color: #cccccc;
}
input:-ms-input-placeholder {
  font-size: 0.55rem;
  /* Internet Explorer 10+  适配ie*/
  color: #cccccc;
}
.selectPicker >>> .weui-cell__ft {
  padding: 0 !important;
}
.selectPicker >>> .weui-cell {
  padding: 0 !important;
}
.selectPicker >>> .weui-cell__ft:after {
  display: none !important;
}
.selectPicker  /deep/  .vux-cell-value {
  color: #666 !important;;
}
.search-fixed {
  position: fixed;
  width: 100%;
  z-index: 100;
  max-width: 640px;
}
</style>